<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    :inline="true"
  >
    <!-- 车型名称 -->
    <el-form-item label="车型名称" prop="name" width="100px">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <!-- 车型分类 -->
    <el-form-item label="车型分类" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择车型大小">
        <el-option label="小型车" value="shanghai"></el-option>
        <el-option label="中型车" value="beijing"></el-option>
        <el-option label="大型车" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <!-- 乘坐人数 -->
    乘坐人数：
    <el-input-number
      v-model="num1"
      @change="handleChange"
      :min="1"
      :max="50"
      label="乘坐人数"
    ></el-input-number>
    <!-- 燃料类型 -->
    <el-switch
      v-model="value1"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="柴油"
      inactive-text="汽油"
    >
    </el-switch>
    <!-- 油耗 -->
    油耗：
    <el-input-number
      v-model="num2"
      :precision="2"
      :step="0.01"
      :max="100"
    ></el-input-number>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即添加</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ListAdd",
  data() {
    return {
      num1: 1,
      num2: 1,
      value1: true,
      
      
    };
  },
  
};
</script>

<style scoped>
/* .el-input {
  width: 400px;
} */
.el-form {
  margin-left: 280px;
}
</style>